<template>
  <div class="cloud-database-dashboard">
    <el-tabs v-model="activeTab" class="top-tabs">
      <el-tab-pane label="数据库列表" name="CloudDatabaseList">
        <CloudDatabaseList v-if="activeTab === 'CloudDatabaseList'" @showCloudDatabaseDashboard="showCloudDatabaseDashboard"></CloudDatabaseList>
      </el-tab-pane>
      <el-tab-pane label="数据库详情" name="CloudDatabaseDashboard">
        <CloudDatabaseDashboard v-if="activeTab === 'CloudDatabaseDashboard'" :resource="currentResource"></CloudDatabaseDashboard>
      </el-tab-pane>
      <el-tab-pane label="访问控制" name="AccessControl">
        <AccessControl v-if="activeTab === 'AccessControl'" :resource="currentResource"></AccessControl>
      </el-tab-pane>
      <el-tab-pane label="账户信息" name="DatabaseAccounts">
        <DatabaseAccounts v-if="activeTab === 'DatabaseAccounts'" :resource="currentResource"></DatabaseAccounts>
      </el-tab-pane>

      <el-tab-pane label="监控信息" name="DatabaseMonitor">
        <DatabaseMonitor v-if="activeTab === 'DatabaseMonitor'" :resource="currentResource"></DatabaseMonitor>
      </el-tab-pane>
      <el-tab-pane label="数据库管理" name="DatabaseManagement">
        <DatabaseManagement v-if="activeTab === 'DatabaseManagement'" :resource="currentResource"></DatabaseManagement>
      </el-tab-pane>
<!--      <el-tab-pane label="备份恢复" name="3"></el-tab-pane>-->
      <el-tab-pane label="慢SQL" name="SlowSQLMonitor">
        <SlowSQLMonitor v-if="activeTab === 'SlowSQLMonitor'" :resource="currentResource"></SlowSQLMonitor>
      </el-tab-pane>
      <el-tab-pane label="备份信息" name="BackupList">
        <BackupList v-if="activeTab === 'BackupList'" :resource="currentResource"></BackupList>
      </el-tab-pane>

      <el-tab-pane label="日志文件" name="LogFiles">
        <LogFiles v-if="activeTab === 'LogFiles'" :resource="currentResource"></LogFiles>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CloudDatabaseDashboard from "@/views/bom/CloudDatabase/CloudDatabaseDashboard.vue";
import CloudDatabaseList from "@/views/bom/CloudDatabase/CloudDatabaseList.vue";
import DatabaseMonitor from "@/views/bom/CloudDatabase/DatabaseMonitor.vue";
import AccessControl from "@/views/bom/CloudDatabase/AccessControl.vue";
import DatabaseAccounts from "@/views/bom/CloudDatabase/DatabaseAccounts.vue";
import DatabaseManagement from "@/views/bom/CloudDatabase/DatabaseManagement.vue";
import SlowSQLMonitor from "@/views/bom/CloudDatabase/SlowSQLMonitor.vue";
import BackupList from "@/views/bom/CloudDatabase/BackupList.vue";
import LogFiles from "@/views/bom/CloudDatabase/LogFiles.vue";

export default {
  name: "CloudDatase",
  components: {
    CloudDatabaseList,
    CloudDatabaseDashboard,
    DatabaseMonitor,
    AccessControl,
    DatabaseAccounts,
    DatabaseManagement,
    SlowSQLMonitor,
    BackupList,
    LogFiles
  },
  data() {
    return {
      activeTab: 'CloudDatabaseList',
      currentResource: null,
    };
  },
  created() {
  },
  methods: {
    handleTab(tab) {
      console.log("切换到标签页:", tab.name);
    },
    updateCurrentResource(resource) {
      this.currentResource = resource;
      console.log("更新当前资源:", this.currentResource);
    },
    showCloudDatabaseDashboard(resource) {
      this.activeTab = 'CloudDatabaseDashboard';
      this.updateCurrentResource(resource);
    }
  },
  watch: {
    activeTab(newVal) {
      console.log('标签页切换到:', newVal);
    },
    currentResource(newVal) {
      console.log('当前资源更新:', newVal);
    }
  }
};
</script>
<style scoped>
.cloud-database-dashboard {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  background-color: #f5f7fa;
  padding: 10px;
  min-height: 100vh;
}
/* 顶部标签样式 */
.top-tabs {
  background-color: #fff;
  padding: 10px 20px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  border-bottom: none;
}

.top-tabs .el-tabs__header {
  margin-bottom: 0;
}

.top-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}

.top-tabs .el-tabs__item {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
}

.top-tabs .el-tabs__item.is-active {
  color: #409EFF;
  font-weight: bold;
}

</style>
